import mapContained from "@/cme-base2D/index.vue";
import OpenLayersMap from "@/cme-base2D/OpenLayersMap";
import autofit from "autofit.js";

import ShapedCharge2 from "@/assets/image/ShapedCharge1.png";
import ShapedCharge4 from "@/assets/image/ShapedCharge2.png";
import ShapedCharge5 from "@/assets/image/ShapedCharge3.png";
import ShapedCharge3 from "@/assets/image/ShapedCharge4.png";
import ShapedCharge1 from "@/assets/image/ShapedCharge5.png";

import Rocket2 from "@/assets/image/rocket1.png";
import Rocket4 from "@/assets/image/rocket2.png";
import Rocket5 from "@/assets/image/rocket3.png";
import Rocket3 from "@/assets/image/rocket4.png";
import Rocket1 from "@/assets/image/rocket5.png";

import SmokeStove2 from "@/assets/image/smokeStove1.png";
import SmokeStove4 from "@/assets/image/smokeStove2.png";
import SmokeStove5 from "@/assets/image/smokeStove3.png";
import SmokeStove3 from "@/assets/image/smokeStove4.png";
import SmokeStove1 from "@/assets/image/smokeStove5.png";

import AntiaircraftGun2 from "@/assets/image/antiaircraftGun1.png";
import AntiaircraftGun4 from "@/assets/image/antiaircraftGun2.png";
import AntiaircraftGun5 from "@/assets/image/antiaircraftGun3.png";
import AntiaircraftGun3 from "@/assets/image/antiaircraftGun4.png";
import AntiaircraftGun1 from "@/assets/image/antiaircraftGun5.png";

import EZUIKit from "ezuikit-js";
import dataJson from "./data/index.json";
export default defineComponent({
  components: {
    mapContained,
  },
  setup(props) {
    // 创建响应式状态
    const state = reactive({
      // 飞机轨迹
      flightList: [
        // {
        //   name: "NM_B3913_202409111100",
        //   path: "../../../public/2024shandong_path/NM_B3913_202409111100.CSV",
        //   id: "1",
        // },
        {
          name: "NM_B3913_202410131936",
          path: "../../../public/2024shandong_path/NM_B3913_202410131936.CSV",
          id: "2",
        },
        {
          name: "SD_B3913_202404141354",
          path: "../../../public/2024shandong_path/SD_B3913_202404141354.CSV",
          id: "5",
        },
        {
          name: "SD_B3913_202404021630",
          path: "../../../public/2024shandong_path/SD_B3913_202404021630.CSV",
          id: "4",
        },
        // {
        //   name: "SD_B124M_202403231237",
        //   path: "../../../public/2024shandong_path/SD_B124M_202403231237.CSV",
        //   id: "3",
        // },
      ],
      // 作业点
      homeworkPoint: [
        {
          name: "高炮",
          id: "1",
          imgPath: [
            AntiaircraftGun1,
            AntiaircraftGun2,
            AntiaircraftGun3,
            AntiaircraftGun4,
            AntiaircraftGun5,
          ],
          type: "antiaircraftGun",
        },
        {
          name: "火箭",
          id: "2",
          imgPath: [Rocket1, Rocket2, Rocket3, Rocket4, Rocket5],
          type: "rocket",
        },
        {
          name: "烟炉",
          id: "3",
          imgPath: [
            SmokeStove1,
            SmokeStove2,
            SmokeStove3,
            SmokeStove4,
            SmokeStove5,
          ],
          type: "smokeStove",
        },
        {
          name: "聚能空气炮",
          id: "4",
          imgPath: [
            ShapedCharge1,
            ShapedCharge2,
            ShapedCharge3,
            ShapedCharge4,
            ShapedCharge5,
          ],
          type: "ShapedCharge",
        },
      ],
      selectFlight: "",
      selectHomework: [
        "ShapedCharge",
        "rocket",
        "smokeStove",
        "antiaircraftGun",
      ],
      dialogVisible: false,
      leiDaValue: true,
      switchValue: false,
      urlOptions: [],
      videoValue: "",
      accesstoken: "",
      legendStatus: [
        {
          name: "准备中",
          color: "#5299ff",
        },
        {
          name: "准备就绪",
          color: "green",
        },
        {
          name: "作业中",
          color: "#550693",
        },
        {
          name: "作业完毕",
          color: "red",
        },
      ],
    });
    let player = ref(null);
    let olService = OpenLayersMap.getInstance();

    onMounted(() => {
      autofit.init({
        designHeight: 1080, //高度
        designWidth: 1920, //宽度
        el: "#containers",
        resize: true,
      });
      // 初始化加载全部标点
      state.homeworkPoint.forEach((value) => {
        if (
          state.switchValue &&
          (value.type == "antiaircraftGun" || value.type == "rocket")
        ) {
          olService.loadShapefiles(value.type=='antiaircraftGun'?'gaopao':'huojian');
        }
        olService.createMarkers(
          dataJson[value.type].map((markerObj) => {
            return {
              ...markerObj,
              image: value.imgPath[markerObj.data.status],
            };
          }),
          value.type,
          true
        );
      });
      // 注册标点点击事件
      setTimeout(() => {
        olService.createSingleClickEvent((value) => {}, false);
      }, 300);
      document.addEventListener("click", function (e) {
        if (e.target.className == "operateBtn") {
          if (e.target.innerHTML == "视频监控") {
            let playerParams = Object.keys(e.target.dataset).reduce(function (
              obj,
              key
            ) {
              obj[key] = e.target.dataset[key];

              return obj;
            },
            {});
            state.urlOptions = [];
            state.videoValue = "";
            if (playerParams.urllist) {
              let videList = playerParams.urllist.split(",");
              if (videList && videList.length > 0) {
                state.urlOptions = videList.map((item, index) => {
                  return {
                    label: `视频 ${index + 1}`,
                    value: item,
                  };
                });
                state.videoValue = videList[0];
                state.accesstoken = playerParams.accesstoken;
                methods.play(state.videoValue, state.accesstoken);
              }
            } else {
            }
            state.dialogVisible = true;
          } else {
            state.switchValue = !state.switchValue;
            methods.shapeChange(state.switchValue);
          }
        }
      });
    });
    onBeforeUnmount(() => {
      methods.destroy();
      document.removeEventListener("click", function (e) {});
    });
    const methods = {
      // 监控销毁
      destroy() {
        const destroyPromise = player.value.destroy();
        destroyPromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
        player.value = null;
      },
      play(url, accesstoken) {
        methods.initPlayer({
          url: url,
          accessToken: accesstoken,
        });
      },
      // 监控初始化
      initPlayer(params) {
        if (player.value) {
          methods.destroy();
        }
        player.value = new EZUIKit.EZUIKitPlayer({
          id: "video-container", // 视频容器ID
          height: 500,
          width: 970,
          ...params,
          // simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
          template: "pcLive",
          // plugin: ["talk"], // 加载插件，talk-对讲
          // language: "en", // zh | en
          handleError: (err) => {
            console.error("handleError", err);
          },
          // staticPath: "/ezuikit_static", // 如果想使用本地静态资源，请复制根目录下ezuikit_static 到当前目录下， 然后设置该值
        });
        // window.player = player.value;
      },
      // 作业点点击
      pointClick(value) {
        if (state.selectHomework.includes(value.type)) {
          state.selectHomework = state.selectHomework.filter(
            (item) => item !== value.type
          );
          olService.clearLayer(value.type);
          if (value.type == "antiaircraftGun" || value.type == "rocket") {
            olService.removeShapeFile(value.type=='antiaircraftGun'?'gaopao':'huojian');
          }
        } else {
          if (
            state.switchValue &&
            (value.type == "antiaircraftGun" || value.type == "rocket")
          ) {
            olService.loadShapefiles(value.type=='antiaircraftGun'?'gaopao':'huojian');
          } else {
            olService.removeShapeFile(value.type=='antiaircraftGun'?'gaopao':'huojian');
          }
          state.selectHomework.push(value.type);
          olService.createMarkers(
            dataJson[value.type].map((markerObj) => {
              return {
                ...markerObj,
                image: value.imgPath[markerObj.data.status],
              };
            }),
            value.type,
            true
          );
        }
      },
      // 弹窗关闭
      closeDialog() {
        setTimeout(() => {
          if (player.value) {
            methods.destroy();
          }
        }, 500);
      },
      // 飞机轨迹点击
      flightClick(value) {
        olService.stopCallPlay();
        const res = olService.clearCallBackData();
        if (state.selectFlight == value.name) {
          state.selectFlight = "";
          if (res.length > 0) {
            res.forEach((item) => {
              olService.clearLayer(item);
            });
          }
          return false;
        }
        if (res.length > 0) {
          res.forEach((item) => {
            olService.clearLayer(item);
          });
        }
        state.selectFlight = value.name;
        olService.callPlay(value.path, value.name);
      },
      // 打开雷达
      leiDaChange(value) {
        if (value) {
          olService.openRadar();
        } else {
          olService.closeRadar();
        }
      }, // 切换射界
      shapeChange(value) {
        if (value) {
          if (state.selectHomework.includes("antiaircraftGun")) {
            olService.loadShapefiles("gaopao");
          } else if (state.selectHomework.includes("rocket")) {
            olService.loadShapefiles("houjian");
          }
        } else {
          olService.removeShapeFile("houjian");
          olService.removeShapeFile("gaopao");
        }
      },
      videoChange(value) {
        methods.play(state.videoValue, state.accesstoken);
      },
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
